<template>
  <Spin :spinning="spinning" wrapper-class-name="w-full h-full">
    <div :class="prefixCls" class="h-full" v-if="pageInfo.modelList.length && !spinning">
      <TabsPage
        v-if="pageInfo.pageType === PageTypeEnum.TAB"
        v-model:active="activeRef"
        :dataSource="pageInfo.modelList"
        :buttons="pageInfo.buttons"
        :preview="preview"
        @del="handleDel"
        @refresh="handleRefresh"
      />
      <TiledPage
        v-else-if="pageInfo.pageType === PageTypeEnum.TILED"
        @change="handleChange"
        @del="handleDel"
        v-model:active="activeRef"
        :dataSource="pageInfo.modelList"
        :preview="preview"
        :isChild="isChild"
      />
    </div>
    <div v-else class="empty h-full flex pt-20vh justify-center items-center">
      <HEmpty />
    </div>
  </Spin>
</template>

<script lang="ts" setup name="HComplexPage">
  import { ref, unref, computed, watch } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRouter } from 'vue-router';
  import { createComplexContext } from './useComplexContext';
  import { PageType, PageTypeEnum } from './typing';
  import TabsPage from './TabsPage/index.vue';
  import TiledPage from './TiledPage/index.vue';
  import HEmpty from '/@/components/HEmpty/index.vue';
  import { Spin } from 'ant-design-vue';
  import { getCompositeInfoApi } from '/@/api/config-center/model-design';

  const { prefixCls } = useDesign('h-complex');

  const props = defineProps({
    active: Number,
    preview: Boolean,
    isChild: Boolean,
    isComplex: Boolean,
    isUpdate: Boolean,
    detail: Boolean,
    parentParam: String,
    parentQuery: String,
    moduleId: String,
    modelId: String,
    pageType: {
      type: String as PropType<PageType>,
      default: PageTypeEnum.TAB,
    },
    dataSource: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    buttons: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    record: {
      type: Object,
      default: () => ({}),
    },
    parentModel: {
      type: Object,
      default: () => ({}),
    },
  });

  //  窗口固定参数
  const parentQuery = computed(() => props.parentQuery);
  // 窗口参数
  const parentParam = computed(() => props.parentParam);
  const { currentRoute } = useRouter();
  const route = unref(currentRoute);

  const moduleId = ref(props.moduleId || (route.meta.moduleId as string));

  const pageInfo = ref<Indexable>({ modelList: [] });

  const emit = defineEmits(['update:active', 'change', 'del']);

  const activeRef = computed({
    get: () => {
      return props.active;
    },
    set: (v) => {
      emit('update:active', v);
    },
  });
  function handleDel(idx) {
    emit('del', idx);
  }
  function handleChange(data) {
    emit('change', data);
  }
  const spinning = ref(false);
  init();
  watch(
    () => [props.dataSource, props.pageType],
    ([v]) => {
      if (v && v.length) {
        init();
      }
    },
  );
  // eslint-disable-next-line vue/no-setup-props-destructure
  const { isUpdate, preview, detail, isChild, record } = props;
  //  provide 数据穿透
  createComplexContext({
    parentQuery,
    parentParam,
    isUpdate,
    preview,
    detail,
    isChild,
    record,
    moduleId: moduleId.value,
  });

  async function init() {
    try {
      spinning.value = true;
      const { dataSource, buttons, pageType, modelId } = props;
      console.log(buttons);

      if (modelId) {
        const data = await getCompositeInfoApi({
          modelId: unref(modelId),
          moduleId: unref(moduleId),
        });
        pageInfo.value = data.compositeDesignInfo || {};
      } else {
        pageInfo.value = {
          modelList: dataSource || [],
          buttons,
          pageType,
        };
      }
    } catch (e) {
      throw e;
    } finally {
      spinning.value = false;
      activeRef.value = 0;
    }
  }
  async function handleRefresh() {
    console.log(
      '%cparentModel===>154： ',
      'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      props.parentModel,
    );
    if (!props.parentModel) return;
    // const ids = {
    //   moduleId: props.parentModel.moduleId,
    //   modelId: props.parentModel.tableModelId,
    // };
    // const ret = await commonGetByIdApi(ids, props.record);
    // console.log(
    //   '%cret===>165： ',
    //   'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
    //   ret,
    // );
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-h-complex';

  ::v-deep(.ant-spin-container) {
    height: 100% !important;
  }
  .@{prefix-cls} {
    .empty {
      height: calc(100% - 16px);
      background-color: @component-background;
    }
  }
</style>
